@extends('adminlte::page')

@section('title', 'Create Direct Lead')

@section('content')
    <div class="card card-dark">
        <div class="card-header">
            <h3 class="card-title">Add New Direct Lead</h3>
        </div>

        <div class="card-body">
            <form action="{{ route('direct_leads.store') }}" method="POST" id ="directLeadForm">
                @csrf
                <div class="form-group row">
                    <div class="col-md-6">
                        <label>Name:</label>
                        <input type="text" name="name" class="form-control" required>
                    </div>

                    <div class="col-md-6">
                        <label>Phone:</label>
                        <input type="text" name="phone_number" class="form-control" required>
                    </div>
                </div>

                <div class="form-group row">
                    <div class="col-md-6">
                        <label>Email:</label>
                        <input type="email" name="email" class="form-control" required>
                    </div>

                    <div class="col-md-6">
                        <label>Source:</label>
                        <select name="source" class="form-control" required>
                            <option value="" disabled selected>-- Select Source --</option>
                            <option value="Orbi Leads">Orbi Leads</option>
                            <option value="Listing">Listing</option>
                            <option value="Indivisual">Indivisual</option>
                        </select>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end">
                    <a href="{{ route('direct_leads.index') }}" class="btn btn-danger mx-1">Cancel</a>
                    <button type="submit" class="btn btn-dark">Save</button>
                </div>

            </form>
        </div>
    </div>
@endsection
@section('js')

    <script>
        $(document).ready(function() {
            $("#directLeadForm").validate({
                rules: {
                    name: {
                        required: true,
                        minlength: 3
                    },
                    phone_number: {
                        required: true,
                        digits: true,
                        minlength: 10,
                        maxlength: 15
                    },
                    email: {
                        required: true,
                        email: true
                    },
                    source: {
                        required: true
                    }
                },
                messages: {
                    name: {
                        required: "<strong>Name is required.</strong>",
                        minlength: "<strong>Name must be at least 3 characters long.</strong>"
                    },
                    phone_number: {
                        required: "<strong>Phone number is required.</strong>",
                        digits: "<strong>Phone number must contain only digits.</strong>",
                        minlength: "<strong>Phone number must be at least 10 digits.</strong>",
                        maxlength: "<strong>Phone number can't be more than 15 digits.</strong>"
                    },
                    email: {
                        required: "<strong>Email is required.</strong>",
                        email: "<strong>Enter a valid email address.</strong>"
                    },
                    source: {
                        required: "<strong>Please select a lead source.</strong>"
                    }
                },
                errorElement: "strong",
                errorClass: "text-danger",
                highlight: function(element) {
                    $(element).addClass("is-invalid");
                },
                unhighlight: function(element) {
                    $(element).removeClass("is-invalid");
                },
                errorPlacement: function(error, element) {
                    if (element.is("select")) {
                        error.insertAfter(element); // Select ke niche error dikhayega
                    } else {
                        error.insertAfter(element);
                    }
                }
            });
        });
    </script>
@endsection